<template>
  <div class="career-planner">
    <div class="planner-header">
      <h2>AI职业规划助手</h2>
      <p>基于您的个人情况，为您推荐最适合的职业发展路径</p>
    </div>

    <div class="planner-content">
      <!-- 个人信息收集 -->
      <div v-if="step === 'info'" class="info-section">
        <h3>个人信息</h3>
        <el-form :model="userInfo" label-width="120px">
          <el-form-item label="当前职业">
            <el-input v-model="userInfo.currentJob" placeholder="请输入您当前的职业" />
          </el-form-item>
          <el-form-item label="工作年限">
            <el-select v-model="userInfo.experience" placeholder="请选择工作年限">
              <el-option label="应届生" value="fresh" />
              <el-option label="1-3年" value="junior" />
              <el-option label="3-5年" value="middle" />
              <el-option label="5年以上" value="senior" />
            </el-select>
          </el-form-item>
          <el-form-item label="技术背景">
            <el-checkbox-group v-model="userInfo.skills">
              <el-checkbox label="frontend">前端开发</el-checkbox>
              <el-checkbox label="backend">后端开发</el-checkbox>
              <el-checkbox label="database">数据库</el-checkbox>
              <el-checkbox label="ai">人工智能</el-checkbox>
              <el-checkbox label="cloud">云计算</el-checkbox>
              <el-checkbox label="devops">运维开发</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="期望发展方向">
            <el-select v-model="userInfo.interests" multiple placeholder="请选择感兴趣的方向">
              <el-option label="技术专家" value="tech_expert" />
              <el-option label="架构师" value="architect" />
              <el-option label="技术管理" value="tech_management" />
              <el-option label="产品专家" value="product_expert" />
              <el-option label="创业" value="entrepreneur" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="startAnalysis">开始分析</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 分析结果 -->
      <div v-if="step === 'analysis'" class="analysis-section">
        <div class="analysis-result">
          <h3>职业发展分析报告</h3>
          <div class="career-match">
            <h4>最适合您的职业方向</h4>
            <el-card v-for="match in careerMatches" :key="match.id" class="match-card">
              <div class="match-header">
                <h5>{{ match.title }}</h5>
                <el-tag :type="match.matchType">{{ match.matchLevel }}</el-tag>
              </div>
              <p>{{ match.description }}</p>
              <div class="match-details">
                <div class="skill-gap">
                  <h6>需要提升的技能：</h6>
                  <el-tag 
                    v-for="skill in match.skillGaps" 
                    :key="skill.name"
                    :type="skill.level"
                    class="skill-tag"
                  >
                    {{ skill.name }}
                  </el-tag>
                </div>
                <div class="timeline">
                  <h6>预计达成时间：{{ match.timeline }}</h6>
                </div>
              </div>
              <el-button type="primary" @click="startCareerPath(match.id)">
                开始学习路径
              </el-button>
            </el-card>
          </div>

          <div class="market-analysis">
            <h4>市场分析</h4>
            <el-row :gutter="20">
              <el-col :span="8" v-for="stat in marketStats" :key="stat.title">
                <el-card class="stat-card">
                  <h5>{{ stat.title }}</h5>
                  <div class="stat-value">{{ stat.value }}</div>
                  <p>{{ stat.description }}</p>
                </el-card>
              </el-col>
            </el-row>
          </div>

          <div class="action-plan">
            <h4>行动建议</h4>
            <el-timeline>
              <el-timeline-item
                v-for="(action, index) in actionPlan"
                :key="index"
                :type="action.type"
                :timestamp="action.timeframe"
              >
                {{ action.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>

        <div class="analysis-actions">
          <el-button @click="step = 'info'">重新测评</el-button>
          <el-button type="primary" @click="downloadReport">下载报告</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const step = ref('info')
const userInfo = ref({
  currentJob: '',
  experience: '',
  skills: [],
  interests: []
})

// 模拟职业匹配结果
const careerMatches = ref([
  {
    id: 1,
    title: '高级前端工程师',
    matchType: 'success',
    matchLevel: '高度匹配',
    description: '基于您的前端开发经验和技能，建议您向高级前端工程师方向发展。',
    skillGaps: [
      { name: 'TypeScript', level: 'warning' },
      { name: '微前端', level: 'info' },
      { name: '性能优化', level: 'success' }
    ],
    timeline: '6-12个月'
  },
  {
    id: 2,
    title: '前端架构师',
    matchType: 'warning',
    matchLevel: '部分匹配',
    description: '需要加强系统设计和架构能力，建议先积累更多项目经验。',
    skillGaps: [
      { name: '系统设计', level: 'danger' },
      { name: '技术管理', level: 'warning' },
      { name: '架构模式', level: 'warning' }
    ],
    timeline: '1-2年'
  }
])

// 模拟市场分析数据
const marketStats = ref([
  {
    title: '岗位需求量',
    value: '年增长 35%',
    description: '前端开发岗位持续增长，高级人才缺口大'
  },
  {
    title: '平均薪资',
    value: '25-35K',
    description: '高级前端工程师薪资水平'
  },
  {
    title: '发展前景',
    value: '优秀',
    description: '技术发展迅速，职业发展空间大'
  }
])

// 模拟行动建议
const actionPlan = ref([
  {
    content: '深入学习 TypeScript 和现代前端框架',
    timeframe: '1-3个月',
    type: 'primary'
  },
  {
    content: '参与开源项目，积累实战经验',
    timeframe: '3-6个月',
    type: 'success'
  },
  {
    content: '学习微前端架构和性能优化',
    timeframe: '6-9个月',
    type: 'warning'
  },
  {
    content: '尝试技术分享和团队管理',
    timeframe: '9-12个月',
    type: 'info'
  }
])

const startAnalysis = () => {
  // 这里可以调用后端API进行职业分析
  step.value = 'analysis'
}

const startCareerPath = (pathId) => {
  // 跳转到对应的职业发展路径
  console.log('Start career path:', pathId)
}

const downloadReport = () => {
  // 实现报告下载功能
  console.log('Download report')
}
</script>

<style scoped>
.career-planner {
  padding: 20px;
}

.planner-header {
  text-align: center;
  margin-bottom: 30px;
}

.planner-header h2 {
  margin-bottom: 10px;
  color: #303133;
}

.planner-header p {
  color: #606266;
}

.info-section {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.analysis-section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.match-card {
  margin-bottom: 20px;
}

.match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.match-header h5 {
  margin: 0;
}

.skill-gap {
  margin: 15px 0;
}

.skill-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

.stat-card {
  text-align: center;
  margin-bottom: 20px;
}

.stat-value {
  font-size: 24px;
  color: #409EFF;
  margin: 10px 0;
}

.action-plan {
  margin-top: 30px;
}

.analysis-actions {
  margin-top: 20px;
  text-align: center;
}
</style> 